<template>
	<el-dropdown trigger="click">
		<div class="avatar">
			<img :src="props.img" alt="avatar" />
		</div>
		<template #dropdown>
			<el-dropdown-menu>
				<el-dropdown-item @click="logout">
					<el-icon><SwitchButton /></el-icon>退出登录
				</el-dropdown-item>

				<el-dropdown-item @click="person" v-if="globalStore.userInfo.type === 'admin'">
					<el-badge :is-dot="isShow" class="item" @click="Luiyan">
						<el-icon><User /></el-icon>我的留言
					</el-badge>
				</el-dropdown-item>
			</el-dropdown-menu>
		</template>
	</el-dropdown>
	<el-dialog v-model="dialogTableVisible" title="留言信息" width="800">
		<div>
			<ul>
				<li v-for="it in liuInfo" :key="it.manger_liu_id">
					<el-row>
						<el-col>
							<div style="display: flex">
								<span style="display: block; margin-left: 5px">内容:{{ it?.manger_liu_content }}</span>
								<span style="display: block; margin-left: 5px">学号:{{ it?.manger_liu_studentId }}</span>
								<span style="display: block; margin-left: 5px; width: 30px; height: 50px; margin-bottom: 5px"
									><el-button type="danger">未处理</el-button></span
								>
							</div>
						</el-col>
					</el-row>
				</li>
			</ul>
			<el-button type="primary" style="margin-left: 20px" @click="oneBy">一键处理</el-button>
		</div>
	</el-dialog>
</template>

<script setup>
const props = defineProps(["img"]);
import { selectLui, updateLiu } from "@/api/admin/home";
import { GlobalStore } from "@/stores";
import { LOGIN_URL } from "@/config/config";
import { useRouter } from "vue-router";
import { ref, onMounted } from "vue";
const isShow = ref();
const dialogTableVisible = ref(false);
const router = useRouter();
const liuInfo = ref([]);
const globalStore = GlobalStore();
// 获取留言
const getLiu = async () => {
	const res = await selectLui();
	if (res.data.code === 200) {
		let arr = res.data.data;
		if (arr.length > 0) {
			let nweArr = arr.filter(it => it.manger_liu_state === 1);
			if (nweArr.length > 0) {
				isShow.value = true;
				ElNotification({
					message: "您有新留言未处理",
					type: "success",
					duration: 3000
				});
			} else {
				nweArr = [];
			}
			liuInfo.value = nweArr;
		}
	} else {
		ElNotification({
			message: "留言获取失败",
			type: "error",
			duration: 3000
		});
	}

	// liuInfo.value = res.data.data;
	// if (liuInfo.value.length > 0) {
	// 	isShow.value = true;
	// 	ElNotification({
	// 		message: "您有新留言未处理",
	// 		type: "success",
	// 		duration: 3000
	// 	});
	// } else {
	// 	ElNotification({
	// 		message: "留言获取失败",
	// 		type: "error",
	// 		duration: 3000
	// 	});
	// }
};
// 处理留言
const Luiyan = () => {
	dialogTableVisible.value = true;
};
// 一键处理
const oneBy = async () => {
	let arr = liuInfo.value.map(it => it.manger_liu_id);
	const res = await updateLiu(arr);
	if (res.data.code === 200) {
		ElNotification({
			message: "处理成功",
			type: "success",
			duration: 3000
		});
		getLiu()
		dialogTableVisible.value = false;
		isShow.value = false;
		
	}else{
		ElNotification({
			message: "处理失败",
			type: "error",
			duration: 3000
		});
		dialogTableVisible.value = false;
	}
};
onMounted(() => {
	getLiu();
});
// 退出登录
const logout = () => {
	globalStore.setToken("");
	localStorage.clear();
	// localStorage.removeItem('TabsState')
	router.push({
		path: LOGIN_URL,
		replace: true
	});
};
</script>

<style scoped lang="scss">
.avatar {
	width: 40px;
	height: 40px;
	overflow: hidden;
	cursor: pointer;
	border-radius: 50%;
	img {
		width: 100%;
		height: 100%;
	}
}
</style>
